import React, { Component } from 'react';

import { Input, Button, Row, Col, List } from 'antd';

import { connect } from 'react-redux'

import { initListData, valChange, addItem, delItem } from '../store/actions'

class TodoList extends Component {
  
  render () {
    const { iptVal, listData, handleChange, handleAdd, handleDel } = this.props
    return (
      <div>
        <Row>
          <Col span={20}>
            <Input value={iptVal} onChange={(e) => { handleChange(e.target.value) } }/>
          </Col>
          <Col span={4}>
            <Button type="primary" onClick={() => { handleAdd(iptVal) } }>Primary</Button>
          </Col>
        </Row>
        <List
          bordered
          dataSource={listData}
          renderItem={(item, index) => <List.Item onClick={ () => { handleDel(index) } }>{item}</List.Item>}
        />
      </div>
    )
  }

  componentDidMount () {
    this.props.getList()
  }
}

const mapStateToProps = (state) => {
  return {
    iptVal: state.iptVal,
    listData: state.listData
  }
}

const mapDispatchToProps = (dispatch) => {
  return {
    getList () {
      dispatch(initListData())
    },
    handleChange (val) {
      dispatch(valChange(val))
    },
    handleAdd (item) {
      if (item.trim()) {
        dispatch(addItem(item))
      }
    },
    handleDel (index) {
      dispatch(delItem(index))
    }
  }
}

export default connect(mapStateToProps, mapDispatchToProps)(TodoList);